<template>
  <div>
    <el-space
        fill
        wrap
        fill-ratio="65"
        direction="vertical"
        style="width: 100%"
    >
      <div v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
        <el-card v-for="(i,index) in showVo" :key="i.id" class="box-card">
          <template #header>
            <div class="card-header">
              <el-avatar shape="square" :src="url+i.avatar"/>
              <div style="margin: auto">{{ i.name }}</div>
              <div style="margin: auto">{{ i.createDate }}</div>
              <div @click="delShow(showVo, index, i)" style="margin: auto;color: red" v-if="router.currentRoute.value.query.userId!=null && router.currentRoute.value.query.userId === userInfo().id">
                <el-icon><Delete /></el-icon>
              </div>
            </div>
          </template>
          <div>
            <div style="margin: 10px; font-size: 35px; width: 780px;  white-space: pre-wrap;">{{ i.text }}</div>
            <div class="demo-image__preview">
              <el-image
                  v-for="(item,index) in i.images"
                  style="width: 100px; height: 100px; margin: 4px"
                  :src="item"
                  :zoom-rate="1.2"
                  :preview-src-list="i.images"
                  :initial-index="index"
                  fit="cover"
              />
            </div>
            <div style="display: flex">
              <div style="margin-left: auto; font-size: 20px">
                <el-icon style="margin-right: 10px;color: #b88230" v-if="i.showPraise" @click="clickPraise(i)">
                  <StarFilled/>
                </el-icon>
                <el-icon style="margin-right: 10px" v-else @click="clickPraise(i)">
                  <Star/>
                </el-icon>
                <el-icon>
                  <ChatSquare @click="clickComment1(i)"/>
                </el-icon>
              </div>
            </div>
            <el-divider/>
            <div v-if="i.praiseUserList.length > 0">
              <el-icon style="color: #b88230;font-size: 15px; margin-right: 5px">
                <StarFilled/>
              </el-icon>
              <div v-for="(j,index) in i.praiseUserList" :key="j.userId" style="display: inline-block">
                <span @click="toMyselfShow(j)">{{ j.name }}</span>
                <span v-if="index!=(i.praiseUserList.length-1)">、</span>
              </div>
            </div>
            <div v-if="i.commentVos.length > 0" style="margin: 5px">
              <div v-for="(k,index) in i.commentVos" :key="k.id">
                <div style="display: flex">
                  <span class="user" @click="toMyselfShow(k.sendUser)">{{ k.sendUser.userName }}:</span>
                  <span style="margin-left: 6px">{{ k.content }}</span>
                  <span class="comment" @click="clickComment2(k,i)">回复</span>
                </div>
                <div v-if="k.childComment.length > 0">
                  <div style="display: flex" v-for="(f,index) in k.childComment" :key="f.id">
                    <span class="user" @click="toMyselfShow(f.sendUser)">{{ f.sendUser.userName }}</span>
                    <span style="margin: 0 5px">回复</span>
                    <span class="user" @click="toMyselfShow(f.replyUser)">{{ f.replyUser.userName }}:</span>
                    <span style="margin-left: 6px">{{f.content }}</span>
                    <span class="comment" @click="clickComment3(k,f,i)">回复</span>
                  </div>
                </div>
              </div>
            </div>
            <div style="margin-top: 10px">
              <el-input v-if="showInput && indexShow==i.id" v-model="input" :placeholder="placeholder" @keyup.enter.native="submit(i)"/>
            </div>
          </div>
        </el-card>
      </div>
    </el-space>
    <el-button type="primary" class="add" icon="Plus" @click="toAddShow" circle/>
  </div>
</template>

<script lang="ts" setup>
import {useRouter} from "vue-router";
import {Ref, ref, watchEffect} from "vue";
import {callbacks, MessageDto} from "../../utils/webSocket";
import {comment, deleteShow, getAllShow, getUserShow, praise} from "../../service/ShowApi";
import {error, success} from "../../utils/messageUtil";
import {userInfo} from "../../utils/constant";

const router = useRouter();
const url = ref(import.meta.env.VITE_APP_BASE_API + "/common/file/loadFileId?fileId=")

const showVo: Ref<any[]> = ref([]);

const placeholder = ref('说点什么吧')
const showInput = ref(false)
const indexShow = ref('')
const input = ref('')
let isLoad = false
const CommentRo = {
  parentId: '',
  showId:'',
  replyId:'',
  comment:'',
  replyName:''
}

const delShow = (showVo:any, index:any, show:any)=>{
  deleteShow({
    showId: show.id
  }).then(d=>{
    if(d.data.code === '200'){
      showVo.splice(index, 1);
      success("删除成功")
    }
  }).catch(()=>{
    error("删除失败")
  })
}

const submit = (data: any)=>{
  if(input.value === ''){
    error("评论点什么吧")
    return
  }
  CommentRo.comment = input.value;
  comment(CommentRo).then(d=>{
    if(d.data.code === '200'){
      success("评论成功")
      //直接评论
      if(CommentRo.replyId === '' && CommentRo.parentId===''){
        data.commentVos.push({
          content:CommentRo.comment,
          sendUser:{
            userId: userInfo().id,
            userName: userInfo().name
          },
          childComment:[]
        })
      }else{
        data.commentVos.filter((c:any)=>c.id==CommentRo.parentId)[0].childComment.push({
          content:CommentRo.comment,
          sendUser:{
            userId: userInfo().id,
            userName: userInfo().name
          },
          replyUser:{
            userId: CommentRo.replyId,
            userName: CommentRo.replyName
          },
          childComment:[]
        })
      }
      //回复评论

      CommentRo.comment = ''
      input.value = ''
    }else{
      error(d.data.message)
    }
  }).catch(()=>{
    error("网络错误")
  })
}

const clickComment1 = (data:any)=>{
  showInput.value = !showInput.value;
  indexShow.value = data.id
  CommentRo.showId = data.id;
  CommentRo.parentId = '';
  CommentRo.replyId = '';
}

const clickComment2 = (a:any, b:any)=>{
  placeholder.value = '回复' + a.sendUser.userName;
  showInput.value = !showInput.value;
  indexShow.value = b.id
  CommentRo.showId = b.id;
  CommentRo.parentId = a.id;
  CommentRo.replyId = a.sendUser.userId;
  CommentRo.replyName = a.sendUser.userName;
}

const clickComment3 = (a:any, b:any, c:any)=>{
  placeholder.value = '回复' + b.sendUser.userName;
  showInput.value = !showInput.value;
  CommentRo.showId = c.id;
  CommentRo.parentId = a.id;
  CommentRo.replyId = b.sendUser.userId;
}
let pageNumber = 1;

const toMyselfShow = (j: any) => {
  router.push({
    name: 'show',
    query: {
      userId: j.userId,
    }
  })
}

const clickPraise = (i: any) => {
  praise({
    showId: i.id
  }).then(d => {
    if (d.data.code == 200) {
      if (i.showPraise) {
        let indexOf = -1;
        i.praiseUserList.forEach((item: any, index: any) => {
          if (item.userId == userInfo().id) {
            indexOf = index
          }
        })
        i.praiseUserList.splice(indexOf, 1)
        success("取消点赞成功")
      } else {
        i.praiseUserList.unshift({
          userId: userInfo().id,
          name: userInfo().name
        })
        success("点赞成功")
      }
      i.showPraise = !i.showPraise
    } else {
      error(d.data.message)
    }
  }).catch(() => {
    error("网络错误")
  })
}

const load = () => {
  if(isLoad) {
    pageNumber = pageNumber + 1;
    if (router.currentRoute.value.query.userId) {
      getUserShowDate(router.currentRoute.value.query.userId)
    } else {
      getAllShowDate()
    }
  }
}

const getAllShowDate = () => {
  getAllShow({
    pageSize: 2,
    pageNumber: pageNumber
  }).then(d => {
    if (d.data.code == 200) {
      d.data.date.content.forEach((item: any) => {
        showVo.value.push(item)
      })
      isLoad = true;
    } else {
      error(d.data.message)
    }
  }).catch(() => {
    error("网络错误")
  })
}

const getUserShowDate = (userId: any) => {
  getUserShow({
    pageSize: 2,
    pageNumber: pageNumber,
    userId: userId
  }).then(({data}) => {
    if (data.code == 200) {
      data.date.content.forEach((item: any) => {
        showVo.value.push(item)
      })
      isLoad = true;
    } else {

      error("对方已经关闭了说说展示 仅自己可见")
    }
  }).catch(() => {
    error("网络错误")
  })
}

const toAddShow = () => {
  router.push({
    name: 'addShow'
  })
}

const clear = () => {
  showVo.value = [];
  pageNumber = 1;
}

watchEffect(() => {
  if (router.currentRoute.value.name == 'show') {
    clear()
    if (router.currentRoute.value.query.userId) {
      getUserShowDate(router.currentRoute.value.query.userId);
    } else {
      getAllShowDate();
    }
  }
})

</script>

<style scoped>

.card-header {
  display: flex;
}

.box-card {
  margin: 5px 0;
}

.add {
  position: absolute;
  left: 80%;
  top: 80%;
  width: 50px;
  height: 50px;
}

.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}

.demo-image__preview {
  display: flex;
  width: 800px;
  flex-wrap: wrap;
}

.infinite-list {
  height: calc(100vh - 130px);
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list::-webkit-scrollbar {
  display: none
}

.comment{
  margin-left: auto;
  font-size: 5px;
  color: #409eff;
}

.user{
  font-weight: bold;
}
</style>